<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fetch'em</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/bootstrap-responsive.css" rel="stylesheet">
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}
.sidebar-nav {
	padding: 9px 0;
}
</style>

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>
<div class="container">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container"> <a class="brand" href="#">Fetch'em</a>
        <div class="btn-group pull-right"> <a class="btn btn-primary" href="/logout"> Sign out </a> </div>
        <div class="nav-collapse">
          <ul class="nav">
            <li><a data-toggle="modal" href="#newCourseModal"><i class="icon-plus"></i> New Course</a></li>
          </ul>
          <p class="navbar-text pull-right"> {{ Name }}&nbsp;&nbsp;&nbsp; </p>
        </div>
        <!--/.nav-collapse --> 
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="span3">
      <img src="{{ STATIC_URL }}img/arrow-left.jpg" align="right">
      </div>
      <div class="span9"> 
      <h1> Hi! Seems like you are new to Fetch'em.
      </h1>
      <h3> Get started by creating a course.
      </h3>
      
      </div>
    </div>
  </div>
</div>

<div id="newCourseModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="courseModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h3 id="courseModalLabel">Create new course</h3>
    </div>
    <div class="modal-body">
    <form method="post">
{% csrf_token %}
     <!-- <input class="span3" type="text" placeholder="Course Number">
      <input class="span3" type="text" placeholder="Name of course">
        -->
        {{ newCourseForm.CourseNo }} &nbsp; {{ newCourseForm.CourseNo.errors }}
        {{ newCourseForm.Name }} &nbsp; {{ newCourseForm.Name.errors }}
      <p>Enter the credentials of the course submission Gmail account.</p>
        {{ newCourseForm.SubEmail }} &nbsp; {{ newCourseForm.SubEmail.errors }}
        {{ newCourseForm.SubPassword }} &nbsp; {{ newCourseForm.SubPassword.errors }}
        {{ newCourseForm.Year }} &nbsp; {{ newCourseForm.Year.errors }} 
        {{ newCourseForm.Semester }} &nbsp; {{ newCourseForm.Semester.errors }}
     <!-- <input class="span3" type="text" placeholder="Login">
      <input class="span3" type="password" placeholder="Password"> -->

      <p>If you have TAs in your course, enter their names and email accounts below:</p>
   <!--   <input class="span3" type="text" placeholder="Email of TA"> -->
        {{ newCourseForm.TAName }} &nbsp; {{ newCourseForm.TAName.errors }}
        {{ newCourseForm.TAEmail }} &nbsp; {{ newCourseForm.TAEmail.errors }}
        <div id='TAemail'></div>
      <p><!-- <button class="btn" name="addTA"><i class="icon-plus" onclick='generateRow()'></i> Add TA email</button></p> -->
                <input class='btn' type='button' name='Add TA' value='Add TA Email'onClick='generateRow()'>
        <input type='hidden' id='id_ExtraEmailCounter' name='ExtraEmailCounter' value='0'>
      <p>Select the xls file containing list of all students with their email ids:</p>
      <p> <button class="btn btn-primary"><i class="icon-upload icon-white"></i> Upload</button></p>

      </div>
      <div class="modal-footer">
      <button class="btn" data-dismiss="modal">Close</button>
      <button type="submit" class="btn btn-primary" name="courseCreate">Create</button>
    </form>
  </div>
  </div>
  
</div>

<!-- Le javascript
    ================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="{{ STATIC_URL }}js/bootstrap.js"></script> 
<script src="{{ STATIC_URL }}js/jquery.js"></script> 
<script src="{{ STATIC_URL }}js/jquery-ui-min.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script> 
</body>
</html>